import React, { useCallback } from 'react'
import { useHistory, useLocation } from 'react-router-dom'
// import React, { Component } from 'react'
// import { withRouter } from 'react-router-dom'
import { NavBar, Icon } from 'antd-mobile'
import animate from '@h/animate'

import { DetailWrap } from './styledDetail'

// @animate
// @withRouter
// class Detail extends Component {
//   handleClickLeft = () => {
//     let { history } = this.props
//     // history.goBack()
//     // let from = this.props.location.state.from
//     let {from, listTitle} = this.props.location.state
//     history.push(from, {title: listTitle, from: '/detail'})
//   }

//   render() {
//     let state = this.props.location.state
//     return (
//       <DetailWrap>
//         <NavBar
//           mode="dark"
//           style={{backgroundColor: '#ee742f'}}
//           icon={<Icon type="left" />}
//           onLeftClick={this.handleClickLeft}
//         >
//           {/* { title && null } */}
//           { state && state.title }
//         </NavBar>
//         <div>
//           <div>
//             <img src="https://i3.meishichina.com/attachment/recipe/2015/09/16/c640_201509161442371783820.jpg?x-oss-process=style/c320" alt=""/>
//           </div>
//           <div className="details">
//             <h1>{ state && state.title }</h1>
//             <h3>111浏览/1212收藏</h3>
//             <button>收藏</button>
//           </div>
//         </div>
//       </DetailWrap>
//     )
//   }
// }

const Detail = (props) => {
  const history = useHistory()
  const location = useLocation()

  const handleClickLeft = useCallback(() => {
    let {from, listTitle} = location.state
    history.push(from, {title: listTitle, from: '/detail'})
  }, [history, location])

  let state = location.state
  return (
    <DetailWrap>
      <NavBar
        mode="dark"
        style={{backgroundColor: '#ee742f'}}
        icon={<Icon type="left" />}
        onLeftClick={handleClickLeft}
      >
        {/* { title && null } */}
        { state && state.title }
      </NavBar>
      <div>
        <div>
          <img src="https://i3.meishichina.com/attachment/recipe/2015/09/16/c640_201509161442371783820.jpg?x-oss-process=style/c320" alt=""/>
        </div>
        <div className="details">
          <h1>{ state && state.title }</h1>
          <h3>111浏览/1212收藏</h3>
          <button>收藏</button>
        </div>
      </div>
    </DetailWrap>
  )
}

export default animate(Detail)
